import React from 'react';
import './category-selector.scss'
import Muntil from 'until/mm.jsx'
import Product from 'service/produce-service.jsx'

const _mm=new Muntil();
const _product=new Product();

class CategorySelector extends React.Component{

    constructor(){
        super();
        this.state={
            fristCategoryList:[],
            fristCategoryTd :0,
            secondCategoryList:[],
            secondCategoryId:0,

        }
    }

    componentDidMount(){
        this.loadFristCategory();
    }

    //加载一级分类
    loadFristCategory(){
        _product.getCatetgoryList().then(res=>{
            this.setState({
                fristCategoryList: res
            })
        },errMsg=>{
            _mm.errorTips(errMsg)
        })
    }

    //加载二级品类
    loadSecondCategory(){
        _product.getCatetgoryList(this.state.fristCategoryTd).then(res=>{
            this.setState({
                secondCategoryList: res
            })
        },errMsg=>{
            _mm.errorTips(errMsg)
        })
    }

    //一级品类发生变化时
    onFirstCategoryChange(e){
        let newValue=e.target.value || 0
        this.setState({
            fristCategoryTd : newValue,
            secondCategoryList : [],
            secondCategoryId : 0,
        },()=>{
            this.loadSecondCategory();
            this.onPropsCategoryChange();
        })

    }

    onSecondCategoryChange(e){
        let newValue=e.target.value || 0
        this.setState({
            secondCategoryId:newValue
        },()=>{
            this.onPropsCategoryChange();
        })
    }

    //传给父组件品类选择结果
    onPropsCategoryChange(){

        this.props.onChangeCategory(this.state.fristCategoryTd,this.state.secondCategoryId)

    }

    render(){
        return(
            <div className="col-md-10">
                <select className="form-control cate-select"
                        onChange={(e)=>{this.onFirstCategoryChange(e)}}
                >
                    <option value="">请选择一级分类</option>
                    {
                        this.state.fristCategoryList.map((item,index)=>{
                            return <option value={item.id} key={index}>{item.name}</option>
                        })
                    }
                </select>

                {/*判断二级品类是否存在，不存在既不显示*/}
                {
                    this.state.secondCategoryList.length > 0 ?
                        (
                            <select name="" className="form-control cate-select" onChange={(e)=>{this.onSecondCategoryChange(e)}}>
                                <option value="">请选择二级分类</option>
                                {
                                    this.state.secondCategoryList.map((item,index)=>{
                                        return <option value={item.id} key={index}>{item.name}</option>
                                    })
                                }
                            </select>
                        ) : null
                }

            </div>

        )
    }
}


export default CategorySelector;